<template>
  <div>
    <p class="head-title">{{ datainfo.title }}</p>
    <el-divider></el-divider>
    <div class="info-main">
      <img :src="datainfo.path" width="50px" height="50px" />
      <div>
        <p>{{ datainfo.content }}</p>
        <p>
          发布时间:<span>{{ datainfo.pubdate | getTime }}</span>
        </p>
      </div>
    </div>
    <el-divider></el-divider>
    <ul v-show="commons.length !== 0" class="set-common">
      <li v-for="item in commons" :key="item.id">
        <div>
          <div class="common-info">
            <img
              :src="item.path"
              width="25px"
              height="25px"
              style="vertical-align: middle"
            />
            <div v-show="!item.ruid">
               <span>{{ item.username }}</span>
               <span>{{ item.content }}</span>
            </div>
            <div v-show="item.ruid">
               <span>{{ item.username }}&nbsp;回复&nbsp;{{item.rname}}</span>
               <span>{{ item.content }}</span>
            </div>
            <!-- item.username!==item.rname&&item.rname!==user.username&&item.rname -->
           
          </div>
          <p>
            发布时间:<span>{{ item.ctime | getTime }}</span>
          </p>
        </div>
        <div style="line-height: 20px">
          <el-button type="text" size="small" v-if="item.username!==user.username" @click="comOther(item.fid,item.uid,item.username)">回复</el-button>
          <el-button type="text" size="small" v-else @click="delCommon(item.id)">删除</el-button>
        </div>
      </li>
    </ul>
    <div class="common-me">
      <el-input
        v-model="mycommon"
        type="textarea"
        placeholder="请输入内容"
        clearable
      ></el-input>
      <el-button
        type="primary"
        :rows="2"
        size="small"
        style="margin-left: 12px"
        @click="pushCommon"
        >评论</el-button
      >
    </div>
    <div style="text-align: center">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-size="itemsPerPage"
        :page-sizes="[5, 10, 15, 20]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <el-dialog title="回复" width="750px" :visible.sync="dialogTableVisible">
      <el-form :model="ruleForm" ref="ruleForm" :rules="rules" label-width="10px" >
        <span>回复人:{{ruleForm.commonName}}</span>
        <p>回复内容:</p>
        <el-form-item prop="content">
          <el-input v-model="ruleForm.content"  type="textarea"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit('ruleForm')">回复</el-button>
          <el-button @click="resetForm('ruleForm')">取消</el-button>
        </el-form-item>
      </el-form>
      
    </el-dialog>

  </div>
</template>

<script>
export default {
  data() {
    return {
      datainfo: {},
      page: 1,
      user:'',
      itemsPerPage: 4,
      total: 0,
      id: "",
      mycommon: "",
      commons: [],
      myid:'',
      topicId:'',
      topicUid:'',
      dialogTableVisible:false,
      ruleForm:{
        commonName:'',
        content:''
      },
      rules:{
        content:[
          {required:true,message:'请输入内容'}
        ]
      }
    };
  },
  filters: {
    getTime(val) {
      if (val) {
        return val.substring(0, val.indexOf(" "));
      }
      return val;
    },
  },
  created() {
    this.id = this.$route.query.id;
    if (this.id) {
      this.getContent();
      this.getCommon();
    }
    this.myid = localStorage.getItem('etoak_cms_token')
    this.user = JSON.parse(localStorage.getItem('etoak_cms_user'))
  },
  methods: {
    /* 获得文章猪头 */
    getContent() {
      this.$dao.selectById(this.id).then((res) => {
        // console.log("retie", res);
        if (res.data.flag) {
          this.datainfo = res.data.data;
        }
      });
    },
    getCommon() {
      this.$dao.selectCommentById(this.id, this.page, this.itemsPerPage).then((res) => {
        console.log("评论", res);
        if (res.data.flag) {
          this.commons = res.data.data;
          this.total = res.data.total
        }
      });
    },
    /* 分页 */
    handleSizeChange(val) {
      this.itemsPerPage = val;
      this.getCommon();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getCommon();
    },
    /* 发布评论 */
    pushCommon() {
      const commobj = {};
      commobj.content = this.mycommon;
      commobj.uid = localStorage.getItem('etoak_cms_token');
      // commobj.ruid = this.datainfo.uid;
      commobj.fid = this.datainfo.id;
      this.$dao.addComment(commobj).then(res=>{
        if(res.data.flag){
          this.$message.success('评论成功')
          this.mycommon = ''
          this.getCommon()
        }
      })
    },
    /* 删除评论 */
    delCommon(id){
      this.$confirm('您老确定删除这条友善的评论???','温馨提示',{
        confirmButtonText:'淦',
        cancelButtonText:'不删了'
      }).then(()=>{
          this.$dao.deleteComment(id).then(res=>{
          // console.log(res);
          this.getCommon()
        })
      },()=>{
        this.$message.info('取消删除')
      })
      
    },
    /* 回复别人 */
    comOther(id,uid,name){
      this.topicId = id
      this.topicUid = uid
      this.ruleForm.commonName = name
      this.ruleForm.content = ''
      this.dialogTableVisible = true
      this.getCommon()
    },
    /* 回复 */
    onSubmit(formName){
      const commobj = {}
      commobj.content = this.ruleForm.content
      commobj.uid = JSON.parse(localStorage.getItem('etoak_cms_user')).id  
      commobj.fid = this.topicId
      commobj.ruid = this.topicUid
      
      this.$refs[formName].validate(valid=>{
        if(valid){
          this.$dao.addComment(commobj).then(res=>{
            // console.log('commm',res);
            if(res.data.flag){
              this.dialogTableVisible = false
              this.getCommon()
            }else{
              this.$message.info('回复失败,亲~')
            }
          })          
        }
      })
    },
    /* 重置回复 */
    resetForm(formName){
      this.$refs[formName].resetFields()
      this.dialogTableVisible = false
    }
  },
};
</script>
<style scoped>
.head-title {
  font-size: 28px;
  font-weight: bolder;
}
.info-main {
  display: flex;
}
.info-main div {
  margin-left: 20px;
}
.set-common li {
  list-style: none;
  display: flex;
  justify-content: space-between;
  padding: 0 20px 0 30px;
  margin-bottom: 20px;
  border-bottom: 2px solid sandybrown;
}
.common-info {
  line-height: 20px;
}
.common-info span {
  margin-left: 5px;
}
.common-me {
  width: 1100px;
  display: flex;
  margin: 20px auto;
}
</style>
